<template>
    <div class="index">
        <div class="header">
            <img src="/img/logo.png" alt="聚像传媒" title="聚像传媒" class="logo">
        </div>
        <div class="swiper-banner">
            <swiper :options="swiperOption" v-if="bannerList.length>0">
                <swiper-slide v-for="(banner, index) in bannerList" :key="index">
                    <img :src="getImageUrl(banner.bannerImageUrl)" :class="['banner-image',banner.bannerVideoUrl?'hasUrl':'']" @click="bannerJump(banner)">
                </swiper-slide>
                <div class="swiper-pagination swiper-pagination-white" slot="pagination"></div>
            </swiper>
        </div>
        <div class="section">
            <div class="section-col" v-for="(item, index) in videoCategoryList1" :key="index" @click="jump(item.videoCategoryId)">
                <img v-lazy="getImageUrl(item.videoCategoryImageUrl)" alt="" class="section-img">
                <div class="section2-name">{{item.videoCategoryName}}</div>
            </div>
            <div class="section-col" v-for="(item, index) in videoCategoryList2" :key="index" @click="jump(item.videoCategoryId)">
                <img v-lazy="getImageUrl(item.videoCategoryImageUrl)" alt="" class="section-img">
                <div class="section2-name">{{item.videoCategoryName}}</div>
            </div>
        </div>
        <div class="partner">
            <h3 class="partner-title">合作企业</h3>
            <van-row v-for="(list, key) in cooperationList" :key="key">
                <van-col span="8" v-for="(item, index) in list" :key="index">
                    <img v-lazy="getImageUrl(item.enterpriseLogoUrl)" :alt="item.enterpriseName" class="partner-img">
                </van-col>
            </van-row>
        </div>
        <div class="contact">
            <div class="contact-title">
                <h3>联系我们</h3>
                <p>GET IN TOUCH</p>
            </div>
            <div class="contact-body">
                <p class="address">{{configs.address}}
                    <br>{{configs.room}}
                    <br>{{configs.tel}}
                    <br>{{configs.email}}</p>
                <div class="contact-input">
                    <van-row gutter="10" class="v-row">
                        <van-col span="12">
                            <van-field class="v-input" v-model="info.contactName" placeholder="姓名(Name)" />
                        </van-col>
                        <van-col span="12">
                            <van-field class="v-input" v-model="info.phone" placeholder="电话(Phone)" />
                        </van-col>
                    </van-row>
                    <van-row gutter="10" class="v-row">
                        <van-col span="12">
                            <van-field class="v-input" v-model="info.email" placeholder="邮箱(Email)" />
                        </van-col>
                        <van-col span="12">
                            <van-field class="v-input" v-model="info.company" placeholder="公司(Company)" />
                        </van-col>
                    </van-row>
                </div>
                <van-field class="v-input" v-model="info.message" type="textarea" placeholder="留言(Message)" autosize />
                <div class="send-btn">
                    <van-button type="default" @click.native="send">send</van-button>
                </div>
            </div>
        </div>
        <footer>&copy; 2018 filmwhite.com聚象传媒 版权所有 蜀ICP备16021527号-1</footer>
    </div>
</template>
<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import {
    getVideoCategoryList,
    getCooperationList,
    getConfig,
    addContactUs,
    getAllBanner
} from '@/api/index'
export default {
    data() {
        return {
            videoTarget: null,
            volume: 0,
            videoCategoryList: [],
            videoCategoryList1: [],
            videoCategoryList2: [],
            cooperationList: [],
            info: {
                contactName: null,
                phone: null,
                email: null,
                company: null,
                message: null,
            },
            configs: {
                bannerUrl: '',
                address: '',
                room: '',
                email: '',
                tel: ''
            },
            bannerList: [],
            moveIndex: 0,
            move: null,
            swiperOption: {
                slidesPerView: 1,
                effect: 'fade',
                fadeEffect: {
                    crossFade: true,
                },
                loop: true,
                autoplay: {
                    delay: 5000,
                    stopOnLastSlide: false,
                    disableOnInteraction: false,
                },
                observer: true,
                observeParents: true,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true
                },
                navigation: {
                }
            }
        }
    },
    components: {
        swiper,
        swiperSlide
    },
    created() {
        getConfig('').then(res => this.configs = res)
        getAllBanner().then(res => {
            this.bannerList = res;
        })
    },
    mounted() {
        getCooperationList().then(res => {
            var data = res.list
            var list = []
            while (data.length > 3) {
                list.push(data.splice(0, 3))
            }
            list.push(data)
            this.cooperationList = list
        })
        getVideoCategoryList().then(res => {
            this.videoCategoryList1 = res.splice(0, 4);
            this.videoCategoryList2 = res.splice(0, 4);
        })
    },
    methods: {
        jump(serviceId) {
            this.$router.push('/service?videoCategoryId=' + serviceId)
        },
        send() {
            if (!this.info.contactName ||
                !this.info.phone ||
                !this.info.email ||
                !this.info.company ||
                !this.info.message) {
                alert('请填写完整内容')
                return
            }

            addContactUs(this.info).then(() => alert('留言成功'))
        },
        bannerJump: function(banner) {
            if (banner.bannerVideoUrl) {
                window.open(this.getImageUrl(banner.bannerVideoUrl))
            }
        }
    }
}

</script>
<style scoped>
.header {
    text-align: center;
    padding: 5vw 0;
}

.logo {
    width: 25vw;
}

.swiper-banner {
    height: 43.5vw;
}

.swiper-container {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    width: 100%;
    height: 100%;
}

.swiper-slide .banner-image {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: scale(1.2);
    object-fit: cover;
    transition: transform 3s linear;
}

.swiper-slide.swiper-slide-duplicate-active .banner-image,
.swiper-slide.swiper-slide-active .banner-image {
    transform: matrix(1, 0, 0, 1, 0, 0);
}


.section {
    padding: 10vw 5vw 0;
}

.section-col {
    position: relative;
    width: 100%;
    margin: 2vw 0;
}

.section-img {
    width: 100%;
}

.section2-name {
    width: 30vw;
    position: absolute;
    z-index: 2;
    border: 1px solid #fff;
    box-shadow: 0 5px 10px 2px #333;
    left: 50%;
    padding: 5px 0;
    position: absolute;
    text-align: center;
    top: 50%;
    transform: translate(-50%, -50%);
}

.partner {
    padding: 10vw;
}

.partner-title {
    font-size: 6vw;
    text-align: center;
    margin: 0;
}

.partner-img {
    width: 100%;
}

.contact {
    padding: 5vw;
}

.contact-title {
    text-align: center;
}

.contact-title h3 {
    font-size: 6vw;
    margin: 0;
}

.contact-title p {
    font-size: 2.66vw;
}

.address {
    text-align: center;
    line-height: 1.5;
}

.contact-input {
    padding: 4vw 0;
}

.v-row {
    margin: 5px 0;
}

.v-input {
    border-radius: 5px;
}
.send-btn{
    margin: 5px 0;
    text-align: right;
    color: #2e2e2e;
}
footer{
    padding: 5vw;
    font-size: 2.66vw;
    text-align: center;
}
</style>
